<template>
  <div class="infoPicker">
    <van-field
      readonly
      clickable
      :label="label"
      :value="value"
      :placeholder="placeholder"
      @click="beforeClickAction"
    />
    <span></span><!-- 修复在这个组件里头初始化时不显示下划线的bug  -->
    <van-popup v-model="show" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        value-key="name"
        @cancel="show = false"
        @confirm="confirmAction"
        @change="changeAction"
      />
    </van-popup>
  </div>
</template>

<script>
import { Field, Picker, Popup } from 'vant';

export default {
  name: "infoPicker",
  components:{
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
  },
  props: {
    resultValue: String,
    hasBeforeClick : {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    beforeClickAction () {
      if(this.hasBeforeClick) this.$emit('before-click');
      else this.openPopup();
    },
    openPopup () {
      this.show = true;
    },
    confirmAction (selectedObj) {
      this.$emit('picker-confirm', 
        {
          resultValue: this.resultValue,
          selectedObj: selectedObj
        }
      );
      this.show = false;
    },
    changeAction (picker, values, index) {
      this.$emit('picker-change', 
        {
          picker: picker, 
          values: values, 
          index: index
        }
      );
    }
  }
};
</script>

<style lang="scss">
.infoPicker{

}
</style>
